<template>
	<view class="container">
		<view class="header">
			<dropDownMenu v-if="show" class="downMenu" :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"></dropDownMenu>
			<view class="total">数量：{{ total }}</view>
		</view>
		<view class="listTop">
			<picker mode="date" fields="month" :value="date" start="2021-01-01" :end="endDate" @change="bindDateChange">
				<view class="date">{{ date }}</view>
			</picker>
			<view class="money">
				<view class="income">收入：{{ income }}</view>
				<view class="payed">支出：{{ payed }}</view>
			</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="box" hover-class="hoverClass" v-for="item in list" :key="item.id" @click="goDetail(item)">
				<view class="info">
					<view class="name">
						{{ item.bill_title }}
					</view>
					<view class="time">日期：{{ item.bill_date }}</view>
					<view class="address">
						{{ item.room_address }}
					</view>
				</view>
				<view class="num">
					<view class="income" v-if="item.bill_type == 'income'">+{{ item.bill_money }}元</view>
					<view class="payed" v-if="item.bill_type == 'payed'">-{{ item.bill_money }}元</view>
				</view>
			</view>
			<uni-pagination v-if="total > FormData.perpage" :total="total" :pageSize="FormData.perpage" :value="FormData.page" @change="changePage" />
		</view>
		<view class="empty" v-else>
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">暂无数据</view>
		</view>
		<keyWord :words="FormData.keyword" @onChange="setKeyWord" />
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			endDate: this.dayjs().format('YYYY-MM-DD'),
			date: '',
			type: 1,
			FormData: {
				keyword: '',
				bill_type: '',
				group_id: '',
				is_pay: 1,
				page: 1,
				perpage: 10,
				start_time: '',
				end_time: ''
			},
			titleArr: ['租客', '分组', '收支', ''],
			dropArr: [
				[
					{
						text: '租客',
						value: '1'
					},
					{
						text: '业主',
						value: '2'
					}
				],
				[],
				[
					{
						text: '全部',
						value: ''
					},
					{
						text: '收入',
						value: 'income'
					},
					{
						text: '支出',
						value: 'payed'
					}
				]
			],
			show: false,
			list: [],
			total: 0,
			income: 0,
			payed: 0
		};
	},
	onLoad() {
		this.date = this.dayjs().format('YYYY-MM');
		this.FormData.start_time = this.date + '-01';
		this.FormData.end_time = this.date + '-' + this.dayjs(this.FormData.start_time).daysInMonth();
		this.show = false;
		this.getGroup();
	},
	onShow() {
		this.getBillList();
	},
	onPullDownRefresh() {
		this.FormData.page = 1;
		this.getBillList();
	},
	methods: {
		finishClick(resultData) {
			this.type = resultData[0] == '' ? 1 : resultData[0];
			this.FormData.group_id = resultData[1];
			this.FormData.bill_type = resultData[2];
			this.FormData.page = 1;
			this.getBillList();
		},
		setKeyWord(e) {
			this.FormData.keyword = e;
			this.getBillList();
		},
		bindDateChange(e) {
			this.date = e.detail.value;
			this.FormData.start_time = this.date + '-01';
			this.FormData.end_time = this.date + '-' + this.dayjs(this.FormData.start_time).daysInMonth();
			this.getBillList();
		},
		changePage(e) {
			this.FormData.page = e.current;
			this.getBillList();
		},
		goDetail(item) {
			uni.navigateTo({
				url: '/pages/details/bill?id=' + item.id + '&type=' + this.type
			});
		},
		getBillList() {
			if (this.type == 1) {
				api.billList(this.FormData).then((res) => {
					this.list = res.data.bill_data.items;
					this.total = res.data.bill_data.total;
					this.income = res.data.total_money_income;
					this.payed = res.data.total_money_payed;
					uni.stopPullDownRefresh();
				});
			} else if (this.type == 2) {
				api.billListOwner(this.FormData).then((res) => {
					this.list = res.data.bill_data.items;
					this.total = res.data.bill_data.total;
					this.income = res.data.total_money_income;
					this.payed = res.data.total_money_payed;
					uni.stopPullDownRefresh();
				});
			}
		},
		getGroup() {
			api.groupList({}).then((data) => {
				let list = data.data;
				let arr = [];
				for (let i = 0; i < list.length; i++) {
					let base = {
						text: list[i].group_name,
						value: list[i].id
					};
					arr.push(base);
				}
				let all = {
					text: '全部',
					value: ''
				};
				arr.unshift(all);
				this.dropArr[1] = arr;
				this.show = true;
			});
		}
	}
};
</script>

<style lang="scss">
.listTop {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.date {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		padding: 6rpx 10rpx;
		background: #9a9a9a;
		border-radius: 20rpx;
		color: #fff;
		&::after {
			content: '';
			width: 0;
			height: 0;
			border: 10rpx solid transparent;
			border-top-color: #fff;
			margin-top: 15rpx;
			margin-left: 6rpx;
		}
	}
	.money {
		font-size: 24rpx;
		line-height: 1.4;
		.income {
			color: #1ecb6b;
		}
		.payed {
			color: #ee5959;
		}
	}
}
.list {
	padding: 0 20rpx;
	.box {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.info {
			.name {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}
			.time {
				font-size: 26rpx;
				margin: 10rpx 0;
				color: $uni-secondary-color;
			}
			.address {
				font-size: 28rpx;
				color: $uni-main-color;
			}
		}
		.num {
			font-size: 28rpx;
			.income {
				color: #1ecb6b;
			}
			.payed {
				color: #ee5959;
			}
		}
	}
}
</style>
